<template>
  <el-row>
    <el-col :span="24">
      <div>
        <div v-for="(item, index) in field.fieldValue" :key="item.id" class="right-space line">
          <div class="line">{{index + 1}}.</div>
          <div class="line ref-block" @mousedown="handleMouseDown(index)" @mouseup="handleMouseUp"
               v-html="item.name"></div>
          <div class="line el-icon-delete icon-button" @click="deleteKnowledge(index)"></div>
          <div :style="cursorStyle[index]" class="line cursor" @mouseleave="hideCursor(index)"
               @mouseover="showCursor(index)" @mouseup="reorder(index)">
          </div>
        </div>
        <div class="line vertical-align-top">
          <el-button icon="el-icon-plus" plain size="small" type="primary" @click="selectRelateKnowledge">新增</el-button>
        </div>
        <div :style="pickupBoxStyle" class="multi-block-pickup"></div>
      </div>
    </el-col>
  </el-row>
</template>
<script>
export default {
  name: 'RelatedKnowledge',
  props: {
    field: {},
    fieldIndex: 0
  },
  data() {
    return {
      holdingBox: false,
      cursorStyle: [],
      pickupBoxStyle: {},
      holdingIndex: 0
    }
  },
  methods: {
    handleMouseDown(index) {
      this.holdingBox = true
      this.holdingIndex = index
    },
    handleMouseUp() {
      this.holdingBox = false
    },
    showCursor(index) {
      if (this.holdingBox) {
        this.cursorStyle[index].width = "88px"
        this.cursorStyle[index].border = "1px solid rgba(0, 0, 0, 0.4)"
      }
    },
    hideCursor(index) {
      this.cursorStyle[index].width = "10px"
      this.cursorStyle[index].border = "0"
    },
    reorder(index) {
      if (index === this.holdIndex || index === this.holdIndex - 1) {
        return
      }
      this.$emit("re-order", this.fieldIndex, index + 1, this.holdingIndex)
    },
    selectRelateKnowledge() {
      this.$emit("add", this.fieldIndex)
    },
    deleteKnowledge(index) {
      this.$emit("del", this.fieldIndex, index)
    }
  },
  created() {
    for (let i = 0; i < 10; i++) {
      this.cursorStyle.push({
        width: "10px",
        border: "0"
      })
    }
    this.pickupBoxStyle = {
      display: 'none',
      top: '0',
      left: '0'
    }
  }
}
</script>
<style scoped>
.line {
  display: inline-block;
}

.vertical-align-top {
  vertical-align: top;
}

.right-space {
  margin-right: 10px;
}

.ref-block {
  min-width: 88px;
  height: 32px;
  background: #2DB7A0;
  border-radius: 4px;
  position: relative;
  line-height: 32px;
  text-align: center;
  color: white;
  cursor: pointer;
  -webkit-user-select: none;
}

.icon-button {
  cursor: pointer;
}

.img-preview-block img {
  max-width: 600px;
  max-height: 600px;
}

.cursor {
  height: 30px;
  width: 10px;
  border-radius: 4px;
  vertical-align: bottom;
}

.multi-block-pickup {
  width: 88px;
  height: 32px;
  background: rgba(45, 183, 160, 0.5);
  border-radius: 4px;
  position: absolute;
  line-height: 32px;
  text-align: center;
  padding-right: 10px;
  color: #2DB7A0;
  z-index: 100;
  pointer-events: none;
}
</style>
